<template>
  <div class="table-wrapper" :class="`table-wrapper__${tableName}${$attrs.hasOwnProperty('border') ? ' border' : ''}`" ref="tableHeight">
    <!-- element-ui+umy-ui表格在设置固定列后，鼠标滑轮滚动时固定列与普通列错位问题（滚动完成后正常）（滚动迟钝、迟滞问题）（background-blend-mode）-->
    <!-- https://www.cnblogs.com/bangeshiyiren/p/14842019.html -->
    <ux-grid v-if="$attrs.hasOwnProperty('ux-grid')"
             v-bind="$attrs" :height="tableHeight" v-on="$listeners"
             ref="table" class="ad-table ad-table__ux-grid ad-table-form" :class="{'ad-table__no-border': $attrs.border == false}" size="mini" highlight-current-row
             :summary-method="getSummaries"
             header-cell-class-name="elx-table-th" cell-class-name="elx-table-td">
      <slot></slot>
    </ux-grid>
    <u-table v-else-if="$attrs.hasOwnProperty('u-table')" use-virtual :row-height="30"
             v-bind="$attrs" :height="$attrs.hasOwnProperty('height') ? $attrs.height : ''" v-on="$listeners"
             ref="table" class="ad-table ad-table__u-table" size="mini" highlight-current-row
             :class="{'ad-table-auto-height': !$attrs.hasOwnProperty('show-summary')}"
             show-summary :summary-method="getSummaries"
             header-cell-class-name="table-th" cell-class-name="table-td" selectTrClass="selected-row">
      <template slot="empty">
        <div style="display: flex; height: 200px; flex-direction: column; align-items: center; justify-content: center; line-height: 30px">
          <img src="/img/icon-empty.svg">
          <div>暂无数据</div>
        </div>
      </template>
      <slot></slot>
    </u-table>
    <el-table v-else
              v-bind="$attrs" v-on="$listeners" :height="tableHeight"
              ref="table" class="ad-table ad-table__el-table" size="mini" border highlight-current-row
              :class="{'ad-table-auto-height': !$attrs.hasOwnProperty('show-summary')}"
              show-summary :summary-method="getSummaries"
              header-cell-class-name="table-th" cell-class-name="table-td">
      <slot></slot>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: 0,
    }
  },
  created() {
    this.calTableHeight('tableHeight')
  },
  updated() {
    setTimeout(() => {
      this.$refs.table.doLayout()
    },0)
  },
  computed: {
    tableName() {
      if (this.$attrs.hasOwnProperty('u-table')) {
        return 'u-table'
      } else if (this.$attrs.hasOwnProperty('ux-grid')) {
        return 'ux-grid'
      } else {
        return 'el-table'
      }
    },
    summaryFields() {
      if (this.$attrs.hasOwnProperty('show-summary')) {
        return Object.keys(this.$attrs['show-summary'])
      } else {
        return []
      }
    }
  },
  methods: {
    // https://zhuanlan.zhihu.com/p/272644084
    calTableHeight(table) {
      this.$nextTick(() => {
        const rect = this.$refs[table].getBoundingClientRect()
        this[table] = rect.height
      })
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        // 合计
        if (column.type === 'selection') {
          sums[index] = ''
        }
        // 行数
        else if (column.type === 'index') {
          // sums[index] = data.reduce((prev, curr) => {
          //   return prev + 1
          // }, 0)
          sums[index] = this.$attrs['show-summary'] && this.$attrs['show-summary'].total
        }
        else if (this.summaryFields.length) {
          this.summaryFields.forEach(key => {
            if (column.property == key) {
              sums[index] = this.$attrs['show-summary'][key]
            }
          })
        } else {
          sums[index] = ''
        }
      })

      return this.$attrs.hasOwnProperty('ux-grid') || this.$attrs.hasOwnProperty('u-table') ? [sums] : sums
    }
  }
}
</script>

<style lang="scss">
.table-wrapper {
  @mixin common {
    // 去除边框
    .el-table--border { border: 0;
      &::before { height: 0; }
      &::after { width: 0; }}
    .el-table__fixed-footer-wrapper {
      .table-td { border-bottom: none; }}
    // 强制加上合计栏，不然高度无法自动计算
    .ad-table.ad-table-auto-height {
      .el-table__footer-wrapper { visibility: hidden; height: 1px; }
      .el-table__fixed::before { content: none; }
      .el-table__fixed-footer-wrapper { display: none; }}}

  &.table-wrapper__el-table { @include common; }
  &.table-wrapper__u-table { @include common; }
  &.table-wrapper__ux-grid {}
}
</style>

<style lang="scss" scoped>
// el-table-infinite-scroll插件需要加上 overflow:auto 不然会报错 http://www.zhano.cn/webFront/JavaScript/6435.html
.table-wrapper { flex: 1; overflow: auto; }

$border-color: #e3e3e3;
.table-wrapper.border { border: 1px solid $border-color; }

::v-deep .ad-table {
  @mixin common {
    &.ad-table__no-border {
      .elx-table .elx-table--border-line { border: none; }}

    // 单元格样式
    .table-td { padding: 10px 0;
      .cell { line-height: 1; }}
    .elx-cell { justify-content: left !important; text-align: left; }
    .elx-table-td { height: auto !important; padding: 8px 0;
      .elx-cell { line-height: 1; }}
    .col--index .elx-cell { justify-content: center !important; text-align: center !important; }

    // 表头单元格样式
    .table-th { padding: 4px 0; background-color: #f5f5f5 !important; font-weight: normal; color: #000;
      .cell { display: flex !important; height: 26px; align-items: center; line-height: 1; }
      .caret-wrapper { height: 100%;
        .ascending { top: 2px; }
        .descending { bottom: 2px; }}
      .el-table__column-filter-trigger { display: flex; height: 100%; align-items: center; }
      &.table-th-td-index .cell { justify-content: center; }}
    .elx-table-th { padding: 0; height: 30px !important; background-color: #f5f5f5; background-image: linear-gradient($border-color,$border-color),linear-gradient($border-color,$border-color); font-weight: normal; color: #000;
      .cell { display: flex; }}

    // 边框颜色
    .el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group { border-color: #e3e3e3 !important; }
    .el-table--border::after, .el-table--group::after, .el-table::before { background-color: #e3e3e3 !important; }
  }

  &.ad-table__el-table { @include common; }
  &.ad-table__u-table { @include common; }
  &.ad-table__ux-grid { @include common; }
}
</style>